<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 指标申诉 </template>
    <a-form
      :model="formData"
      ref="refForm"
      :rules="rules"
      :label-col-props="{ span: 6, offset: 0 }"
      :wrapper-col-props="{ span: 18, offset: 0 }"
    >
      <a-form-item label="申诉理由" field="returnReason" show-colon>
        <a-textarea v-model="formData.reason" />
      </a-form-item>
      <a-form-item label="申诉证据" field="returnReason" show-colon>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { useVModel } from '@vueuse/core';
import { watch } from 'vue';

const props = withDefaults(
  defineProps<{
    visible: boolean;
    appealIndexData?: any;
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'update:appealIndexData', 'save']);

const handleOk = async () => {
  emits('save', formData.value);
  emits('update:visible', false);
};
const handleCancel = () => {
  emits('update:visible', false);
};
const rules = reactive({
  returnReason: [
    {
      required: true,
      message: '请输入'
    }
  ]
});
const formData = ref<any>();
watch(
  () => props.visible,
  (val) => {
    if (val) {
      formData.value = cloneDeep(props.appealIndexData);
    }
  }
);
</script>
